<template>
    <div class="mains">
        <div class="login-contain">
          <div>
            <button @click="clickBtn()">counter1:{{counter1}}</button>
            <button>counter2:{{counter2}}</button>
            <button @click="api_test()">测试</button>
          </div>

          <div id="data-scroll">
            <div id="row-wrap" ref="row-wrap">
              <div v-for="(item, index) in historyData" @click="clickItem(index)" :class="getRowStyle(index)">
                {{item.seq}}: {{item.move}} - {{item.dead_piece}}
              </div>
            </div>
          </div>

          <div class="panel">
            <button @click="change_player()">上下调换</button>
          </div>

          <!-- 显示棋盘 -->
          <div class="chess-board" >

            <div v-for="(row_status, row) in board_status" >

              <div v-for="(piece, col) in row_status" >
                <div class="piece" :class="get_piece_cls(piece, row, col)"></div>
              </div>

              <div style="clear: both"></div>
            </div>

          </div>

        </div>
    </div>
</template>

<script setup>
import { reactive, getCurrentInstance, onMounted, watch, ref } from 'vue'
import { ElMessage } from 'element-plus'
import {useStore} from 'vuex'
import { useRouter } from 'vue-router'
import cookies from 'js-cookie'
import utils from "../jslib/utils"

const instance = getCurrentInstance()

let board_status_data = [
  ["RJ1", "RM1", "RX1", "RS1", "RW", "RS2", "RX2", "RM2", "RJ2"],
  ["", "",  "",    "",    "",   "",    "",    "",    ""],
  ["",    "RP1", "",    "",    "",   "",    "",    "RP2", ""],
  ["RB1", "",    "RB2", "",    "RB3", "",   "RB4", "",    "RB5"],
  ["", "", "", "", "", "", "", "", ""],
  ["", "", "", "", "", "", "", "", ""],
  ["BB5", "", "BB4", "", "BB3", "", "BB2", "", "BB1"],
  ["", "BP2", "", "", "", "", "", "BP1", ""],
  ["", "", "", "", "", "", "", "", ""],
  ["BJ2", "BM2", "BX2", "BS2", "BW", "BS1", "BX1", "BM1", "BJ1"],
];
let board_status=ref(board_status_data)


//
let counter1=ref(2);
let counter2=3;
let textData = ref([
  "123",
  "456",
  "456",
  "456",
  "456",
  "456",
  "456",
  "456",
  "456",
  "456",
  "456",
])

let historyData = [];

let selectIndex=null;

let cur_player="B";


onMounted(()=>{
  //
  console.log("Test mounted")
  window.addEventListener('keydown', handleKeyDown, true);

  // 获取数据
  let req = {
    match_id: 26
  };
  instance.proxy.$http.post('/api/v2.0/get_match_history ', req).then((res) => {
    let error = res.error
    if (error == 0) {
      console.log(res.data)
      historyData = res.data;
      counter1.value++;
    }else{

      ElMessage.error('error:' + error)

    }
  })
})


function clickBtn() {
  counter1.value += 1;
  counter2 += 1;
}

function change_player() {
  if ("B" == cur_player) {
    cur_player = "R"
  } else if ("R" == cur_player) {
    cur_player = "B"
  }
  board_status.value = utils.reverse_rb_piece(board_status.value)
}

function api_test() {

}

function getMachineMoveAnalysis(match_id, seq) {
  let req = {
    'match_id': match_id,
    'seq': seq
  }
  instance.proxy.$http.post('/api/v2.0/cal_machine_move ', req).then((res) => {
    let error = res.error
    if (error == 0) {
      console.log(res.data)
    }else{
      ElMessage.error('error:' + error)
    }
  })

}

function update_board_status(data) {
  if ("B" == cur_player) {
    board_status.value = data;
  } else {
    board_status.value = utils.reverse_rb_piece(data);
  }
}

function clickItem(index) {
  console.log("clickItem:", index)
  selectIndex = index;

  update_board_status(historyData[selectIndex].status.status)

  counter1.value ++;

  //getMachineMoveAnalysis(20, historyData[selectIndex].seq)

}

function handleKeyDown(event) {
  console.log("handleKeyDown:", event.key, this)
  if (selectIndex == null) {
    return;
  }
  if ("ArrowUp" == event.key) {
    if (selectIndex > 0) {
      selectIndex--;
      // board_status.value = ;
      update_board_status(historyData[selectIndex].status.status);
      //getMachineMoveAnalysis(20, historyData[selectIndex].seq)
    }
  } else if ("ArrowDown" == event.key) {
    if (selectIndex < historyData.length - 1) {
      selectIndex++;
      // board_status.value = historyData[selectIndex].status.status;
      update_board_status(historyData[selectIndex].status.status)
      //getMachineMoveAnalysis(20, historyData[selectIndex].seq)
    }
  }

  document.getElementById("row-wrap").style.marginTop = "-" + (selectIndex * 20) + "px";
  counter1.value ++;
}

function getRowStyle(index) {
  let res = {};
  if (index == selectIndex) {
    res['select'] = true;
  }
  // console.log("getRowStyle:", index, selectIndex, res)
  return res;
}


function get_piece_cls(piece, row, col) {
  let res = {}
  let piece_cls = {
    'RW': 'red-w',
    'RS1': 'red-s',
    'RS2': 'red-s',
    'RX1': 'red-x',
    'RX2': 'red-x',
    'RM1': 'red-m',
    'RM2': 'red-m',
    'RJ1': 'red-j',
    'RJ2': 'red-j',
    'RP1': 'red-p',
    'RP2': 'red-p',
    'RB1': 'red-b',
    'RB2': 'red-b',
    'RB3': 'red-b',
    'RB4': 'red-b',
    'RB5': 'red-b',

    'BW': 'black-w',
    'BS1': 'black-s',
    'BS2': 'black-s',
    'BX1': 'black-x',
    'BX2': 'black-x',
    'BM1': 'black-m',
    'BM2': 'black-m',
    'BJ1': 'black-j',
    'BJ2': 'black-j',
    'BP1': 'black-p',
    'BP2': 'black-p',
    'BB1': 'black-b',
    'BB2': 'black-b',
    'BB3': 'black-b',
    'BB4': 'black-b',
    'BB5': 'black-b',

  }

  if (piece_cls[piece]) {
    res[piece_cls[piece]] = true
  }

  // if (row == sel_row && col == sel_col) {
  //   res['active-piece'] = true;
  // }

  // let move_list = [player_move, opponent_move];
  // let css_name = [['move-piece-from', 'move-piece-to'], ['move-piece-from-2', 'move-piece-to-2']]
  // for (let i in move_list) {
  //   let move_info = move_list[i];
  //   if (move_info) {
  //     if(row == move_info[0] && col == move_info[1]) {
  //       res[css_name[i][0]] = true;
  //     }
  //     if(row == move_info[2] && col == move_info[3]) {
  //       res[css_name[i][1]] = true;
  //     }
  //   }
  // }


  return res;
}


</script>

<style  scoped>
.mains {
    /*background-image: url('../assets/bac.jpg');*/
    /*background-repeat: no-repeat;*/
    /*background-size: cover;*/
    /*width: 100vw;*/
    /*height: 100vh;*/
    display: flex;
    /*align-items: center;*/
}

.login-contain{

}

#row-wrap div {
  cursor: default;
}

#row-wrap div.select {
  background: dodgerblue;
}


.chess-board {
  height:400px;
  width: 300px;
  background-image: url('../assets/img/象棋棋盘3.png');
  background-size: 269px 302px;
  background-position: 10px 11px;
  background-repeat: no-repeat;
  /*visibility: hidden;*/
}

.chess-board .piece {
  height:32px;
  width: 32px;
  /*border: solid 1px;*/
  float: left;
}

.red-w {
  background-image: url('../assets/img/棋子-红帅.png');
  background-size: 30px 30px;
  background-position: 0px 0px;
  background-repeat: no-repeat;
}
.red-s {
  background-image: url('../assets/img/棋子-红士.png');
  background-size: 30px 30px;
  background-position: 0px 0px;
  background-repeat: no-repeat;
}
.red-x {
  background-image: url('../assets/img/棋子-红相.png');
  background-size: 30px 30px;
  background-position: 0px 0px;
  background-repeat: no-repeat;
}
.red-m {
  background-image: url('../assets/img/棋子-红马.png');
  background-size: 30px 30px;
  background-position: 0px 0px;
  background-repeat: no-repeat;
}
.red-j {
  background-image: url('../assets/img/棋子-红车.png');
  background-size: 30px 30px;
  background-position: 0px 0px;
  background-repeat: no-repeat;
}
.red-p {
  background-image: url('../assets/img/棋子-红炮.png');
  background-size: 30px 30px;
  background-position: 0px 0px;
  background-repeat: no-repeat;
}
.red-b {
  background-image: url('../assets/img/棋子-红兵.png');
  background-size: 30px 30px;
  background-position: 0px 0px;
  background-repeat: no-repeat;
}


.black-w {
  background-image: url('../assets/img/棋子-将.png');
  background-size: 30px 30px;
  background-position: 0px 0px;
  background-repeat: no-repeat;
}
.black-s {
  background-image: url('../assets/img/棋子-士.png');
  background-size: 30px 30px;
  background-position: 0px 0px;
  background-repeat: no-repeat;
}
.black-x {
  background-image: url('../assets/img/棋子-象.png');
  background-size: 30px 30px;
  background-position: 0px 0px;
  background-repeat: no-repeat;
}
.black-m {
  background-image: url('../assets/img/棋子-马.png');
  background-size: 30px 30px;
  background-position: 0px 0px;
  background-repeat: no-repeat;
}
.black-j {
  background-image: url('../assets/img/棋子-车.png');
  background-size: 30px 30px;
  background-position: 0px 0px;
  background-repeat: no-repeat;
}
.black-p {
  background-image: url('../assets/img/棋子-炮.png');
  background-size: 30px 30px;
  background-position: 0px 0px;
  background-repeat: no-repeat;
}
.black-b {
  background-image: url('../assets/img/棋子-卒.png');
  background-size: 30px 30px;
  background-position: 0px 0px;
  background-repeat: no-repeat;
}

#data-scroll {
  height:200px;
  overflow: hidden;
}

/*#row-wrap {*/
/*  margin-top: -20px;*/
/*}*/

/*/deep/ .el-input__inner{*/
/*      background-color: rgba(255,255,255,0) !important;*/
/*  }*/
/*  /deep/ .el-input__inner:-webkit-autofill{*/
/*      transition: background-color 5000s ease-in-out 0s;*/
/*  }*/
/*  /deep/ .el-input__inner:-webkit-autofill:focus{*/
/*      -webkit-text-fill-color: #333 !important;*/
/*  }*/
</style>
